<template>
  <div class="app-container">
    <el-table v-loading="listLoading" :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="ID" prop="id" align="center" width="65" />
      <el-table-column label="订单号" prop="orderNumber" align="center" />
      <el-table-column label="下单人" prop="orderLinkMan" align="center" />
      <el-table-column label="联系方式" prop="orderLinkManPhone" align="center" />
      <el-table-column label="配送地址" prop="orderAddress" align="center" />
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleDetail(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogDetailFormVisible">
      <el-form ref="dataDetail" :rules="rules" :model="temp" label-position="right" label-width="100px">
        <el-form-item :label-width="formLabelWidth" label="订单编号">
          <span>{{ temp.orderNumber }}</span>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="订单状态">
          <span>{{ temp.orderStatus }}</span>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="下单时间">
          <span>{{ temp.createdAt | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="物品清单">
          <el-table v-loading="listLoading" :key="tableKey" :data="tempList.orderList" border fit highlight-current-row style="width: 100%;">
            <el-table-column label="编号" prop="goodsId" align="center" width="65"/>
            <el-table-column label="商品名称" prop="goodsName" align="center"/>
            <el-table-column label="商品数量" prop="goodsCount" align="center"/>
            <el-table-column label="商品单价" prop="goodsPrice" align="center"/>
            <el-table-column label="商品总价" prop="goodsSum" align="center"/>
          </el-table>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="合计">
          <span>{{ tempList.orderSum }}</span>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="配送信息" class="delivery">
          <p>{{ temp.orderAddress }}</p>
          <p>{{ temp.orderLinkMan }}</p>
          <p>{{ temp.orderLinkManPhone }}</p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDetailFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped>
    .delivery p{
        padding: 0;
        margin: 0;
    }
</style>

<script>
    import {
        fetchOrdersAjax,
        getOrderDetailAjax
    } from "@/api/order";
    import waves from "@/directive/waves"; // Waves directive
    import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

    export default {
        name: "Products",
        components: { Pagination },
        directives: { waves },
        filters: {},

        data() {
            return {
                tableKey: 0,
                list: [],
                total: 0,
                listLoading: true,
                listQuery: {
                    pageNum: 1,
                    pageSize: 10
                },
                textMap: {
                    create: "新增商品",
                    detail: "商品详情"
                },
                downloadLoading: false,
                dialogDetailFormVisible: false,
                temp: {},
                formLabelWidth: "150px",
                rules: {},
                dialogStatus: "",
                tempList: [],
                headers: { Authorization: 'Bearer ' + this.$store.state.user.token },
                host: process.env.BASE_API
            };
        },
        computed: {
            adInfo() {
                return { adName: this.temp.adName, adDesc: this.temp.adDesc };
            }
        },
        created() {
            this.getList();
        },
        methods: {
            handleExport(data) {
                this.dialogStatus = "detail";
                this.dialogDetailFormVisible = true;
            },
            handleDetail(data) {
                this.dialogDetailFormVisible = true;
                getOrderDetailAjax(data).then(data => {
                    this.temp = data.data.data;
                    this.tempList = JSON.parse(this.temp.orderInfo)
                })
            },
            getList() {
                this.listLoading = true;
                fetchOrdersAjax(this.listQuery).then(response => {
                    this.list = response.data.data.pageData;
                    this.total = response.data.data.maxCount;
                    this.listLoading = false;
                });
            },

            handleFilter() {
                this.listQuery.page = 1;
                this.getList();
            }

        }
    };
</script>
